<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>大作业_简版日历</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#box {
			width: 280px;
			height: 360px;
			margin: 50px auto;
			background: linear-gradient(#299a0b, #0ebaa3);
			color: aliceblue;
			line-height: 40px;
		}

		#header {
			height: 40px;
			color: aliceblue;
			line-height: 40px;
		}

		#header span {
			float: left;
			text-align: center;
			margin-top: 10px;
			line-height: 40px;
		}

		#prev,
		#next {
			width: 20%;
			line-height: 40px;
			cursor: pointer;
		}

		#current {
			width: 60%;
			line-height: 40px;
		}

		#week li {
			width: 40px;
			text-align: center;
			float: left;
			line-height: 40px;
		}

		#content li {
			width: 40px;
			text-align: center;
			float: left;
			line-height: 40px;
		}

		.today {
			background-color: red;
			color: aqua;
		}

		.pm {
			color: red;
		}
	</style>
</head>

<body>
	<div id="box">
		<div id="header">
			<span id="prev" data-value="-1">上</span>
			<span id="current"></span>
			<span id="next" data-value="1">下</span>
		</div>
		<ul id="week">
			<li>日</li>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
		</ul>
		<ul id="content">
			<!-- <li>31</li>
					<li>1</li>
					<li>2</li> -->
		</ul>
	</div>
</body>
<script>
	var oContent = document.getElementById("content");
	var oPrev = document.getElementById("prev");
	var oNext = document.getElementById("next");
	var oCurrent = document.getElementById("current");

	var date = new Date();
	var newDate = new Date(date)
	var nowday = new Date(newDate).getDate()
	var nowMonth = newDate.getMonth() + 1

	fn()
	oPrev.onclick = function () {
		date.setDate(1)
		var month = date.getMonth()
		date.setMonth(month - 1)
		fn()
	}
	oNext.onclick = function () {
		date.setDate(1)
		var month = date.getMonth()
		date.setMonth(month + 1)
		fn()
	}


	function fn() {
		oContent.innerHTML = ``

		newDate.setDate(1)
		var week = newDate.getDay()
		var day = date.getDate()
		var year = date.getFullYear()
		var month = date.getMonth() + 1

		oCurrent.innerHTML = `${year}年${month}月`
		var html = ``
		for (i = getFirstDays(month, year) - week + 1; i <= getFirstDays(month, year); i++) {
			if (i == nowday && month == nowMonth + 1) {
				oContent.innerHTML += `<li class='today'>${i}</li>`
			}
			else {
				oContent.innerHTML += `<li>${i}</li>`
			}
		}





		for (i = 1; i <= getThisDays(month, year); i++) {
			if (i == nowday && month == nowMonth) {
				oContent.innerHTML += `<li class='today'>${i}</li>`
			}
			else {
				oContent.innerHTML += `<li>${i}</li>`
			}
		}




		for (i = 1; i <= 42 - getThisDays(month, year) - week; i++) {
			if (i == nowday && month == nowMonth - 1) {
				oContent.innerHTML += `<li class='today'>${i}</li>`
			}
			else {
				oContent.innerHTML += `<li>${i}</li>`
			}
		}
	}


	function getThisDays(month, year) {
		var date = new Date(year, month, 0)
		return date.getDate()
	}

	function getLastDays(month, year) {
		++month
		var date = new Date(year, month, 0)
		return date.getDate()
	}

	function getFirstDays(month, year) {
		--month
		var date = new Date(year, month, 0)
		return date.getDate()
	}


</script>


</html>